<template>
  <div class="card-info">
    <a-card type="inner">
      <a-skeleton :loading="loading">
        <div class="card-info-head">
          <div class="card-info-head-title">{{ title }}</div>
          <div class="card-table-head-remark">
            <a-button v-if="!isEdit" type="link" @click="handleEdit">
              <template #icon><EditOutlined /></template>
            </a-button>
          </div>
        </div>
        <div v-if="!isEdit" class="form-noedit">
          <div class="remark-span" v-if="remark">
            <p>{{ remark }}</p>
          </div>
          <div v-else class="no-data">
            <img class="no-data-img" src="/@/assets/images/nodata.png" />
            <p>暂无说明</p>
          </div>
        </div>
        <div v-else class="form-edit">
          <a-textarea v-model:value="editVal" placeholder="请填写报告说明" :auto-size="{ minRows: 4, maxRows: 6 }" :maxLength="2000" show-count />
          <div class="form-edit-bottom">
            <a-button class="form-edit-btn" @click="handleCancel"> 取消 </a-button>
            <a-button type="primary" :loading="saveLoading" class="form-edit-btn" @click="handleSave"> 保存 </a-button>
          </div>
        </div>
      </a-skeleton>
    </a-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { Card, Button, Skeleton, Input } from 'ant-design-vue';
  import { EditOutlined } from '@ant-design/icons-vue';
  import { defHttp } from '/@/utils/http/axios';

  export default defineComponent({
    name: 'ReportRemarkCard',
    components: {
      [Card.name]: Card,
      [Button.name]: Button,
      [Skeleton.name]: Skeleton,
      [Input.TextArea.name]: Input.TextArea,
      EditOutlined,
    },
    props: {
      title: String,
      reportCode: String,
      reportName: String,
    },
    setup(props) {
      const loading = ref(false);
      const remark = ref('');
      const editVal = ref('');
      const isEdit = ref(false);
      const saveLoading = ref(false);

      const getRemark = async () => {
        if (!props.reportCode) return;
        loading.value = true;
        try {
          const res = await defHttp.get(
            {
              url: `/report/info/${props.reportCode}`,
            },
            {
              isTransformResponse: false,
            }
          );
          if (res?.data) {
            remark.value = res.data.reportRemark;
          } else {
            remark.value = '';
          }
        } catch (error) {
          console.error('获取说明失败:', error);
        } finally {
          loading.value = false;
        }
      };

      const handleEdit = () => {
        isEdit.value = true;
        editVal.value = remark.value || '';
      };

      const handleCancel = () => {
        isEdit.value = false;
      };

      const handleSave = async () => {
        saveLoading.value = true;
        try {
          const res = await defHttp.post(
            {
              url: '/report/update',
              data: {
                code: props.reportCode,
                name: props.reportName,
                reportRemark: editVal.value,
              },
            },
            {
              errorMessageMode: 'message',
            }
          );
          if (res?.success) {
            remark.value = editVal.value;
            isEdit.value = false;
          }
        } catch (error) {
          console.error('保存说明失败:', error);
        } finally {
          saveLoading.value = false;
        }
      };

      watch(
        () => props.reportCode,
        () => {
          // getRemark();
        }
      );

      // getRemark();

      return {
        loading,
        remark,
        editVal,
        isEdit,
        saveLoading,
        handleEdit,
        handleCancel,
        handleSave,
      };
    },
  });
</script>

<style lang="less" scoped>
  .card-info {
    background: #ffffff;
    box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    border-radius: 8px;
    // margin: 10px;

    &-head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;

      &-title {
        font-size: 16px;
        font-weight: 600;
        color: #1d2129;
      }
    }
  }

  .no-data {
    text-align: center;
    padding: 20px 0;

    &-img {
      width: 120px;
      height: 120px;
    }

    p {
      color: #4e5969;
      margin-top: 8px;
    }
  }

  .form-edit {
    &-bottom {
      margin-top: 20px;
      text-align: right;
    }

    &-btn {
      margin-left: 12px;
    }
  }

  .remark-span {
    white-space: pre-wrap;
    color: #1d2129;
    line-height: 1.5;
  }

  .card-table-head-remark {
    height: 24px;
    width: 24px;
  }
  :deep(.ant-card-body) {
    padding: 16px;
  }
  :deep(.ant-card) {
    box-shadow: none !important;
    background: transparent !important;
  }
</style>
